<template>
    <div>
        <div class="filter-container">
            <el-form label-position="top" :inline="true">
                <el-form-item label="用户ID">
                    <el-input type="textarea" autosize v-model="search.userId" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="玩家ID">
                    <el-input type="textarea" autosize v-model="search.playerId" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="操作时间">
                    <picker-datetime-range v-model="search.created_at"></picker-datetime-range>
                </el-form-item>
                <el-form-item label="事件类型">
                    <el-select class="filter-item" v-model="search.action" multiple collapse-tags placeholder="请选择" style="width: 200px;">
                        <el-option
                            v-for="(item, key) in optionActions"
                            :key="key"
                            :label="item"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="-">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :max-height="maxHeight">
            <vxe-table-column title="渠道" field="account.source" width="120" formatter="formatAppSourceName"/>
            <vxe-table-column title="用户ID" field="userId" width="90"/>
            <vxe-table-column title="玩家ID" field="account.playerId" width="90"/>
            <vxe-table-column title="昵称" field="account.nickname" width="150"/>
            <vxe-table-column title="行为" field="action" width="100">
                <template #default="{row}">
                    {{ optionActions[row.action] }}
                </template>
            </vxe-table-column>
            <vxe-table-column title="内容" field="data"/>
            <vxe-table-column title="备注" field="remark"/>
            <vxe-table-column title="操作人" field="manager_name" width="100"/>
            <vxe-table-column title="操作时间" field="created_at" width="140"/>
<!--            <vxe-table-column title="更新时间" field="updated_at" width="140"/>-->
        </vxe-table>

        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        props: {
            playerId: '',
            userId: '',
        },
        components: {

        },
        data() {
            return {
                search: {
                    userId: '',
                    playerId: '',
                    created_at: [],
                    action: '',
                },
                loading: false,
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                totalDataNumber: 0,
                pageOptions: this.$store.state.backend.pageOptions,
                optionActions: {},
            }
        },
        computed: {
            maxHeight() {
                return this.$store.state.backend.windowInnerHeight - 210;
            },
        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                // 简单去重
                if (filter.userId) {
                    filter.userId = Array.from(new Set(
                        filter.userId.toString().split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                    ));
                }
                // 简单去重
                if (filter.playerId) {
                    filter.playerId = Array.from(new Set(
                        filter.playerId.toString().split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                    ));
                }
                this.$store.dispatch('user/OperateLogs', filter).then(({data}) => {
                    this.$refs.xTable.reloadData(data.data)
                    // this.tableData = res.data.data;
                    this.totalDataNumber = data.meta.total;
                    if (this.pageNo === 1) {
                        this.optionActions = data.actions;
                    }
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            exportExcel () {
                this.$refs.xTable.exportData({
                    filename: '操作日志',
                    type: 'xlsx'
                })
            },
        },
        created() {
            if (this.playerId) this.search.playerId = this.playerId;
            if (this.userId) this.search.userId = this.userId;
            this.initData();
        }
    }
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 0 !important;
}
</style>

